import React, { Component, createRef } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default class SearchHeader extends Component {
  refInput = createRef()

  handleSearch = () => {
    const { value } = this.refInput.current
    if (!value.trim()) return
    axios.get('https://api.github.com/search/users?q=' + value).then((res) => {
      console.log(res.data)
      PubSub.publish('loadList', res.data.items)
    })
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            ref={this.refInput}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.handleSearch}>Search</button>
        </div>
      </section>
    )
  }
}
